<!--
 * @Description: DOM
 * @Author: rendc
 * @Date: 2025-10-31 09:44:45
 * @LastEditors: rendc
 * @LastEditTime: 2025-10-31 14:52:15
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM</title>
  <!-- 代码是由上往下顺序执行 -->
  <script>
    console.log('🤡 CC - this:', this);
    console.log('🤡 CC - document:', document);
    // nodeType
    console.log('🤡 CC - document.nodeType:', document.nodeType);
    console.log('🤡 CC - document.nodeName:', document.nodeName);
    // 根据id：app寻找元素
    // 代码执行到这里的时候app元素还未创建
    // var divApp = document.getElementById("app");
    // console.log('🤡 CC - divApp:', divApp); // null
    console.log('🤡 CC - document.title:', document.title);
    console.log('🤡 CC - document.URL:', document.URL);
    console.log('🤡 CC - document.body:', document.body);
  </script>
  <style>
    #app{
      /* id选择器 */
    }
    .myApp{
      /* 类选择器 */
    }
    div{
      /* 标签选择器 */
    }
  </style>
</head>
<body>
  DOM
  <div id="app" class="myApp"> 
    app 
    <div id="app1-1">app1-1</div>
    <div id="app1-2">app1-2</div>
    <div id="div3">div3</div>
  </div>
  <script>
    var divApp = document.getElementById("app");
    var myApp = document.getElementsByClassName("myApp");
    console.log('🤡 CC - myApp:', myApp);
    // console.log('🤡 CC - divApp:', divApp); // div
    // console.log('🤡 CC - divApp.nodeType:', divApp.nodeType); // 1
    // console.log('🤡 CC - divApp.nodeName:', divApp.nodeName); // 1
    divApp.firstChild
    // console.log('🤡 CC - divApp.firstChild.nodeValue:', divApp.firstChild.nodeValue);
    // console.log('🤡 CC - divApp.nodeValue:', divApp.nodeValue);
    // 可读可写属性
    // divApp.firstChild.nodeValue = "hello,dom";
    // console.log('🤡 CC - divApp.textContent:', divApp.textContent);
    var app1_1 = document.getElementById('app1-1');
    var app1_2 = document.getElementById('app1-2');
    var un = app1_1.nextSibling;
    // console.log('🤡 CC - un.nodeValue:', un.nodeValue);
    // console.log('🤡 CC - app1_1.nextSibling.nextSibling:', app1_1.nextSibling.nextSibling);
    // console.log('🤡 CC - app1_1.parentNode:', app1_1.parentNode);
    var body = divApp.parentElement;
    // console.log('🤡 CC - body:', body);
    // 修改属性-样式-背景色 
    // body.style.backgroundColor = "red";
    // var childs = divApp.childNodes
    // console.log('🤡 CC - divApp.childNodes:', divApp.childNodes);
    // // 这个数组是可以遍历的
    // for (var i = 0; i < childs.length; i++) {
    //   const e = childs[i];
    //   // console.log('🤡 CC - e.nodeName:', e.nodeName);
    //   if(e.nodeName =="DIV"){
    //     console.log('🤡 CC - e:', e);
    //   }
    // }
    var app1_1 = document.getElementById('app1-1');
    var app1_2 = document.getElementById('app1-2');
    var p = document.createElement("p");
    p.innerHTML = "我是一个段落标签"
    // var result = divApp.appendChild(p);
    // console.log('🤡 CC - result:', result);
    var result = divApp.insertBefore(p,app1_2);

    // 删除元素
    var result = divApp.removeChild(p);
    console.log('🤡 CC - result:', result);
    var div3 = document.getElementById("div3");
    div3.parentNode.removeChild(div3);
    divApp.replaceChild(p,app1_2);
    var flag = "false";
    // 克隆元素 
    var result = divApp.cloneNode(flag);
    console.log('🤡 CC - result:', result);

    var result = divApp.contains(app1_1);
    console.log('🤡 CC - result:', result);
  </script>
</body>
</html>